<template>
    <div class="wrapper customer-box">
        <el-form ref="customer" label-position="top" :inline="true" :model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="订单编号:">
                        <el-input placeholder="订单编号" v-model="filter.orderId" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="订单来源:">
                        <el-select v-model="filter.source" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="facebook" value="facebook"></el-option>
                            <el-option label="fshop" value="fshop"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="状态:">
                        <el-select v-model="filter.status" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="待付款" value="waitPay"></el-option>
                            <el-option label="待发货" value="waitSend"></el-option>
                            <el-option label="已发货" value="waitConfirm"></el-option>
                            <el-option label="待评价" value="waitRate"></el-option>
                            <el-option label="退款中" value="refunding"></el-option>
                            <el-option label="交易成功" value="succeed"></el-option>
                            <el-option label="交易关闭" value="close"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="店铺名称:">
                        <el-input placeholder="店铺名称" v-model="filter.shopName" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="商品名称:">
                        <el-input placeholder="订单编号" v-model="filter.itemName" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="买家名称:">
                        <el-input placeholder="买家名称" v-model="filter.name" size="small"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="4">
                    <el-form-item label="生成时间:">
                        <el-date-picker
                                size="small"
                                v-model="orderTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="支付时间:">
                        <el-date-picker
                                size="small"
                                v-model="payTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty" icon="el-icon-delete">清空筛选条件</el-button>
                        <el-button size="small" type="primary" @click="getOrders" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row class="customer_row">
            <el-table :data="ordersList" v-model="ordersList" style="width: 100%;" highlight-current-row border>
                <el-table-column prop="orderId" label="订单编号" className="item" min-width="250"　align="center" >
                    <template scope="scope" >
                        <div class="customer_col">
                            <span @click="handleToDetail(scope.row)"  :class="{ active: scope.row.visited == true }">
                                {{ scope.row.orderId}}
                            </span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="source" label="订单来源" min-width='80' align="center" className="item"></el-table-column>
                <el-table-column prop="status" label="订单状态" align="center" min-width="80" className="item"></el-table-column>

                <el-table-column prop="shopName" label="店铺名称" align="center" min-width='150' className="item">
                    <template scope="scope" >
                        {{ scope.row.shopName}}
                        <!--<div class="customer_col">-->
                            <!--<span @click="handleToShop(scope.row.shopId)">-->
                                <!--{{ scope.row.shopName}}-->
                            <!--</span>-->
                        <!--</div>-->
                    </template>

                </el-table-column>

                <el-table-column prop="itemName" label="商品名称" align="center" min-width='180' className="item"></el-table-column>
                <el-table-column prop="buyerName" label="买家名称" align="center" min-width='180' className="item"></el-table-column>
                <el-table-column prop="originalAmount" label="订单原价" min-width="90" align="center" className="item"></el-table-column>
                <el-table-column prop="amount" label="实付金额" min-width="90" align="center" className="item"></el-table-column>
                <el-table-column prop="gmtCreate" label="生成时间" min-width="160" align="center" className="item"></el-table-column>
                <el-table-column prop="payTime" label="支付时间" min-width="160" align="center" className="item"></el-table-column>
            </el-table>
        </el-row>

        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    :page-size="filter.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree,
        Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {SHOW_MESSAGE,MESSAGE_IDS,MESSAGE_NAMES,MESSAGE_TELS} from '../../store/mutation-types/template/index';
    import {getDate , returnDate,getArraySub , getLevelName, validTel, setToken, getCookie ,uniqueArr} from '../../utils/auth'
    import {formatDate} from '../../assets/js/common.js';
    import {getStatusName , addUS} from '../../assets/js/option.js';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);

    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Tree);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default {
        scrollToTop: false,
        head(){
            return {
                title: this.title
            }
        },
        data () {
            return {
                title: '订单列表',
                tabName: '订单列表',
                index: 'index',
                filter: {
                    pageNum:1,
                    pageSize: 10,       // 每页条数
                    orderId: '',        //订单编号
                    source: '',         //订单来源  Facebook:facebook 盈店:fshop
                    status: '',         //订单状态(所有为空，待付款waitPay，待发货waitSend，已发货waitConfirm，待评价waitRate，退款中refunding，交易成功succeed，交易关闭close)
                    shopName: '',       //店鋪名称
                    itemName: '',       //商品名称
                    name: '',           //买家名称
                    orderTimeBegin: '', //下单开始时间
                    orderTimeEnd: '',   // 下单结束时间
                    payTimeBegin: '',   //支付开始时间
                    payTimeEnd: '',     //支付结束时间
                },
                orderTime: [],
                payTime: [],
                pagingData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1,
                    pageSize: 50
                },
                ordersList:[],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                }
            }
        },
        computed : {
            ...mapGetters([
                "myCustomerFilter",
                "myCustomerXY",
                "myCustomerCategory"
            ])
        },

        methods: {
            // 获取商品列表
            getOrders () {
                if (this.orderTime && this.orderTime[0]) {
                    this.filter.orderTimeBegin = this.orderTime[0] ? getDate(this.orderTime[0],true) : '';
                    this.filter.orderTimeEnd =  this.orderTime[1] ? getDate(this.orderTime[1],true) : '';
                }else{
                    this.filter.orderTimeBegin ='';
                    this.filter.orderTimeEnd = '';
                }
                if (this.payTime && this.payTime[0]) {
                    this.filter.payTimeBegin = this.payTime[0] ? getDate(this.payTime[0],true) : '';
                    this.filter.payTimeEnd =  this.payTime[1] ? getDate(this.payTime[1],true) : '';
                }else{
                    this.filter.payTimeBegin ='';
                    this.filter.payTimeEnd = '';
                }

                this.$store.dispatch('ordersList', this.filter)
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed && result.data) {
                            this.ordersList = result.data.list;
                            for(let i = 0; i < this.ordersList.length; i++) {
                                this.ordersList[i].visited = false;
                                this.ordersList[i].itemName = '';
                                for (let e=0;e<this.ordersList[i].itemList.length;e++){
                                    this.ordersList[i].itemName += this.ordersList[i].itemList[e].name + ';'
                                }
                                this.ordersList[i].gmtCreate = formatDate(this.ordersList[i].gmtCreate,'YYYY-MM-dd hh:mm:ss');
                                this.ordersList[i].payTime = formatDate(this.ordersList[i].payTime,'YYYY-MM-dd hh:mm:ss');
                                this.ordersList[i].originalAmount = addUS(this.ordersList[i].originalAmount);
                                this.ordersList[i].amount = addUS(this.ordersList[i].amount);
                                this.ordersList[i].status = getStatusName(this.ordersList[i].status);
                            }
                            for(let j=0;j<this.visitedUrl.length;j++){
                                for(let i = 0; i < this.ordersList.length; i++) {
                                    if(this.ordersList[i].orderId == this.visitedUrl[j]){
                                        this.ordersList[i].visited = true;
                                    }
                                }
                            }

                            this.pagingData.total = result.data.total;
                            this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                        }
                        else if(result.data = null){
                            this.pagingData.total = 0;
                            this.pagingData.pageNum = 0;
                        }
                        else{
                            this.ordersList = [];
                            this.pagingData.total = 0;
                            this.pagingData.pageNum = 0;
                        }
                    })
            },

            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.getOrders(this.filter);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
                this.getOrders(this.filter);
            },
            empty () {
                this.filter = {
                    pageNum:1,
                    pageSize: 10,       // 每页条数
                    orderId: '',        //订单编号
                    source: '',         //订单来源  Facebook:facebook 盈店:fshop
                    status: '',         //订单状态(所有为空，待付款waitPay，待发货waitSend，已发货waitConfirm，待评价waitRate，退款中refunding，交易成功succeed，交易关闭close)
                    shopName: '',       //店鋪名称
                    itemName: '',       //商品名称
                    name: '',           //买家名称
                    orderTimeBegin: '', //下单开始时间
                    orderTimeEnd: '',   // 下单结束时间
                    payTimeBegin: '',   //支付开始时间
                    payTimeEnd: '',     //支付结束时间
                };
                this.orderTime = [];
                this.payTime = []
            },
            //跳转到订单详情页
            handleToDetail(row) {
                let arr = this.visitedUrl;
                arr.push(row.orderId);
                arr = uniqueArr(arr);
                this.$store.commit('VISITEDURL',{visitedUrl:arr});

                this.$router.push({path: '/orders/detail?orderId=' + row.orderId})
            },
            handleToShop(shopId) {
                window.open('http://trade.onloon.net/?shopId=' + shopId, '_blank');
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList',
                'visitedUrl': 'getVisitedUrl'
            })
        },
        created(){
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            this.getOrders();
        },

        mounted(){


        }
    }

</script>

<style lang="scss">
    html,body{
        height: 100%;
    }
    .customer-box{
        .one{
            color:red!important;
        }
        .linked{
            width: 100px;
        }
        .el-table .item>div{
            padding: 0px;
        }
        .operator-btn{
            .el-button + .el-button{
                margin-left:0;
            }
        }
        .el-form {
            .el-form-item {
                width: 70%
            }
            .operator-btn{
                text-align:center;
                padding:0 10px;
            }
            .el-input, .el-select, .el-cascader, .el-date-picker {
                width: 100%
            }
        }
        .action_col {
            position: relative
        }

        .customer_row {
            margin-top: 20px;
            background-color: #ff0000;
        }

        .paging {
            margin-top: 15px;
        }

        .customer_col {
            margin-left: 0;
            cursor: pointer;
            span {
                display: block;
                color: #20a0ff;
                word-break: inherit;
                margin: 0 10px;
                text-align: left;
            }
            span.active {
                color: #48576a;
            }
        }
    }
</style>